<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二初天气网</title>
    <link rel="icon" href="images/ecwpicon.png" type="image/png" sizes="128x128">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="js/script.js" defer></script>
</head>
<body>
    <div class="container">
        <header>
            <!-- 添加右上角工具栏 -->
            <div class="toolbar">
                <button id="refresh-btn" class="toolbar-btn" title="刷新天气数据">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
            
            <h1>欢迎光临二初天气网！</h1>
            <h2>目前应用：东莞市天气</h2>
            <h1 style="color: red;">注意：请不要多次刷新，否则天气数据会请求不出来。</h1>
            <div class="update-time">数据更新时间: <span id="update-time">加载中...</span></div>
        </header>

        <main>
            <!-- 天气实况部分 -->
            <section class="current-weather">
                <div class="weather-info">
                    <div class="temperature"><span id="temperature">--</span>°C</div>
                    <div class="weather-desc">
                        <i class="weather-icon" id="weather-icon"></i>
                        <span id="weather-text">加载中...</span>
                    </div>
                </div>
                <div class="weather-detail">
                    <div class="detail-item">
                        <i class="fas fa-tint"></i>
                        <span>湿度: <span id="humidity">--</span>%</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-wind"></i>
                        <span>风速: <span id="wind-speed">--</span> km/h</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-location-arrow"></i>
                        <span>风向: <span id="wind-direction">--</span></span>
                    </div>
                </div>
            </section>

            <!-- 未来3天天气预报 -->
            <section class="forecast">
                <h2>未来3天天气预报</h2>
                <div class="forecast-container">
                    <div class="forecast-item" id="day1">
                        <div class="date">--</div>
                        <div class="day-weather">
                            <i class="weather-icon"></i>
                            <span>白天: --</span>
                        </div>
                        <div class="night-weather">
                            <i class="weather-icon"></i>
                            <span>夜间: --</span>
                        </div>
                        <div class="temp-range">--°C ~ --°C</div>
                    </div>
                    <div class="forecast-item" id="day2">
                        <div class="date">--</div>
                        <div class="day-weather">
                            <i class="weather-icon"></i>
                            <span>白天: --</span>
                        </div>
                        <div class="night-weather">
                            <i class="weather-icon"></i>
                            <span>夜间: --</span>
                        </div>
                        <div class="temp-range">--°C ~ --°C</div>
                    </div>
                    <div class="forecast-item" id="day3">
                        <div class="date">--</div>
                        <div class="day-weather">
                            <i class="weather-icon"></i>
                            <span>白天: --</span>
                        </div>
                        <div class="night-weather">
                            <i class="weather-icon"></i>
                            <span>夜间: --</span>
                        </div>
                        <div class="temp-range">--°C ~ --°C</div>
                    </div>
                </div>
            </section>

            <!-- 生活指数部分 -->
            <section class="lifestyle-indices">
                <h2>生活指数</h2>
                <div class="indices-container">
                    <div class="index-item">
                        <i class="fas fa-tshirt index-icon"></i>
                        <div class="index-info">
                            <h3>穿衣指数</h3>
                            <p id="dressing-index">加载中...</p>
                        </div>
                    </div>
                    <div class="index-item">
                        <i class="fas fa-sun index-icon"></i>
                        <div class="index-info">
                            <h3>紫外线指数</h3>
                            <p id="uv-index">加载中...</p>
                        </div>
                    </div>
                    <div class="index-item">
                        <i class="fas fa-car index-icon"></i>
                        <div class="index-info">
                            <h3>洗车指数</h3>
                            <p id="car-wash-index">加载中...</p>
                        </div>
                    </div>
                    <div class="index-item">
                        <i class="fas fa-mountain index-icon"></i>
                        <div class="index-info">
                            <h3>旅游指数</h3>
                            <p id="travel-index">加载中...</p>
                        </div>
                    </div>
                    <div class="index-item">
                        <i class="fas fa-head-side-mask index-icon"></i>
                        <div class="index-info">
                            <h3>感冒指数</h3>
                            <p id="flu-index">加载中...</p>
                        </div>
                    </div>
                    <div class="index-item">
                        <i class="fas fa-running index-icon"></i>
                        <div class="index-info">
                            <h3>运动指数</h3>
                            <p id="sport-index">加载中...</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <p>数据来源: 心知天气 API</p>
            <p>&copy; 2024 东莞天气网</p>
        </footer>
    </div>
</body>
</html>